<template>
  <el-dialog v-if="visible" style="height: 600px;" title="案件详细信息" direction="rtl" show-close v-model="visible">
    <el-scrollbar max-height="500px">
      <!--案件信息-->
      <el-card>
        <template #header>
          案件信息
        </template>
        <el-form :disabled="true" label-width="150px">
          <el-form-item label="案件编号">{{ c?.caseId }}</el-form-item>
          <el-form-item label="案件状态">{{ CaseStatus?.getCommentByStatus(c?.caseState) }}</el-form-item>
          <el-form-item label="案件原因">{{ c?.cause }}</el-form-item>
          <el-form-item label="调解员">{{ Case?.getMediatorName(c) }}</el-form-item>
          <el-form-item label="调解员手机号">{{ Case?.getMediatorPhone(c) }}</el-form-item>
          <el-form-item label="申请人">{{ c?.applicant?.name }}</el-form-item>
          <el-form-item label="申请人手机号">{{ c?.applicant?.phone }}</el-form-item>
          <el-form-item label="被申请人">{{ c?.respondent?.name }}</el-form-item>
          <el-form-item label="被申请人手机号">{{ c?.respondent?.phoneNum }}</el-form-item>
          <el-form-item label="案件创建时间">{{ c?.createdTime }}</el-form-item>
          <el-form-item label="调解时间">{{ Case?.getMediationTime(c) }}</el-form-item>
        </el-form>
      </el-card>
      <!--欠款信息-->
      <el-card>
        <template #header>
          欠款信息
        </template>
        <el-form label-width="150px">
          <el-form-item label="总金额">
            {{ c?.debt?.amount }}元
          </el-form-item>
          <el-form-item label="本金">
            {{ c?.debt?.principal }} 元
          </el-form-item>
          <el-form-item label="利息">
            {{ c?.debt?.interest }}元
          </el-form-item>
          <el-form-item label="滞纳金">
            {{ c?.debt?.lateFee }}元
          </el-form-item>
          <el-form-item label="违约金">
            {{ c?.debt?.liquidated }}元
          </el-form-item>
          <el-form-item label="罚息">
            {{ c?.debt?.extraInterest }}%
          </el-form-item>
          <el-form-item label="手续费">
            {{ c?.debt?.commission }}元
          </el-form-item>
          <el-form-item label="其他费用">
            {{ c?.debt?.otherFee }}元
          </el-form-item>
          <el-form-item label="借款日期">
            {{ c?.debt?.loanDate }}
          </el-form-item>
          <el-form-item label="年利率">
            {{ c?.debt?.annualRate }}%
          </el-form-item>
          <el-form-item label="还款日期">
            {{ c?.debt?.repayDate }}
          </el-form-item>
          <el-form-item label="逾期利率">
            {{ c?.debt?.overdueRate }}%
          </el-form-item>
        </el-form>
      </el-card>
      <!--申请人信息-->
      <el-card>
        <template #header>
          申请者信息
        </template>
        <el-form :disabled="true" label-width="150px">
          <el-form-item label="申请机构名称">
            {{ c?.applicant?.lawnSite }}
          </el-form-item>
          <el-form-item label="申请人名称">
            {{ c?.applicant?.name }}
          </el-form-item>
          <el-form-item label="申请人联系方式">
            {{ c?.applicant?.phone }}
          </el-form-item>
          <el-form-item label="电子邮箱">
            {{ c?.applicant?.email }}
          </el-form-item>
          <el-form-item label="律师证号">
            {{ c?.applicant?.lawnNum }}
          </el-form-item>
          <el-form-item label="律师事务所位置">
            {{ c?.applicant?.lawnSite }}
          </el-form-item>
        </el-form>
      </el-card>
      <!--被申请人信息-->
      <el-card>
        <template #header>
          被申请人信息
        </template>
        <el-form :disabled="true" label-width="150px">
          <el-form-item label="姓名">{{ c?.respondent?.name }}</el-form-item>
          <el-form-item label="民族">{{ c?.respondent?.nation }}</el-form-item>
          <!--<el-form-item label="性别">{{ c?.respondent?.getSex() }}</el-form-item>-->
          <el-form-item label="联系方式">{{ c?.respondent?.phoneNum }}</el-form-item>
          <el-form-item label="身份证号">{{ c?.respondent?.idNum }}</el-form-item>
          <el-form-item label="收入">{{ c?.respondent?.income }}元</el-form-item>
        </el-form>

      </el-card>
      <!--还款方案信息-->
      <el-card>
        <template #header>
          还款方案信息
        </template>
        <div v-if="c?.repayId">
          <ViewRepayment :enable-t-o-eidt="false" :is-dialog="false" :repayment-model="c.repayment">
          </ViewRepayment>
        </div>
        <center v-if="!c?.repayId">
          暂无还款方案
        </center>
      </el-card>
      <!--还款记录信息-->
      <el-card>
        <template #header>
          还款记录信息
        </template>
        <PaymentHistoryCom :allow-examine="false" :allow-look-detail="false" :cases="[]" :payment-history="[]"
          :case-id="caseId" :get-by-case-id="true">
        </PaymentHistoryCom>
      </el-card>
      <!--被申请人评价-->
      <el-card>
        <template #header>
          案件评价
        </template>
        <el-table :data="caseComments">
          <el-table-column label="评价人">
            <template #default="scope">
              {{ getCommentMan(scope.row.userId) }}
            </template>
          </el-table-column>
          <el-table-column prop="comment" label="评价"> </el-table-column>
          <el-table-column prop="starRate" label="评价分数">
            <template #default="scope">
              <el-rate v-model="scope.row.starRate" disabled show-score text-color="#ff9900" score-template="{value} 分" />
            </template>
          </el-table-column>
          <el-table-column prop="createdTime" label="评价时间"></el-table-column>
        </el-table>
      </el-card>
    </el-scrollbar>
  </el-dialog>
</template>
<script lang="ts" setup>
import PaymentHistoryCom from './paymentHistoryCom.vue';
import ViewRepayment from './viewRepayment.vue';
import { getCaseById } from '@/axios/case/caseReq';
import { ref, reactive, defineProps, watch, Ref } from 'vue'
import { getCaseCommentByCaseId } from '@/axios/case/caseReq';
import { Case, CaseStatus } from '@/types/response/case';
import PaymentHistory from '@/types/response/paymentHistory';
import MediatorComment from '@/types/response/mediatorComment';
let caseComments: Ref<MediatorComment[]> = ref([])
function getCommentMan(userId: number) {
  if(!c.value) return '';
  if (c.value.aptId = userId) return c.value.applicant.name
  if (c.value.rspId = userId) return c.value.respondent.name
  return '';
}
function init() {
  if (props?.case == null && props?.caseId != null) {
    getCaseById(props?.caseId)?.then(res => {
      c.value = reactive(res);
    })
  }
  else {
    c.value = props.case
  }
  
  if (props.caseId!=null){
    getCaseCommentByCaseId(props?.caseId)?.then(res => {
      caseComments.value = res
      console.log("接收到评价信息",res)
    })
  }
    
}
let props = defineProps({
  caseId: {
    type: Number,
    required: true
  },
  case: {
    type: Case,
    required: false
  },
})

let visible = defineModel<boolean>();
let c = ref(new Case());
if (props.case != null) {
  c.value = props?.case;
}
init();
watch(props, () => {
  c.value = props?.case;
  init();
})
</script>
<style scoped lang="scss"></style>